<template>
  <div class="date">
    <el-date-picker
      ref="picker"
      :style="{width: `${isHasButton?'250px':'100%'}`}"
      size="mini"
      v-bind="$attrs"
      v-on="$listeners"
      v-model="dateVal"
      :type="`${type}range`"
      @change="$emit('input',dateVal)"
      range-separator="至">
    </el-date-picker>
    <div class='button' v-if="isHasButton">
      <el-button size="mini" @click="toLastMon">{{lastDayName}}</el-button>
      <el-button size="mini" @click="toCurrMon">{{currDayName}}</el-button>
      <el-button size="mini" @click="toNextMon">{{nextDayName}}</el-button>
    </div>
  </div>
</template>

<script>
  import mixinInfo from "./mixin";
  import {debounce} from '@/util'
  export default {
    name: "day_range_picker",
    mixins: [mixinInfo],
    props: {
      value: String | Date | Number | Array,
    },
    data() {
      return {
        dateVal: ''
      }
    },
    created() {
      !!this.value && this.initDate()
    },
    computed: {
      picker() {
        return this.$refs.picker
      },
      time() {
        if (!this.picker.parsedValue) {
          const now = new Date()
          const last = this.SevenDayBefore(now)
          return [last, now]
        }
        return this.picker.parsedValue
      },
    },
    methods: {
      initDate(){
        if(Array.isArray(this.value)){
          this.dateVal = this.value
        }else if(Array.from(['number','string']).includes(typeof this.value)){
          const date = new Date(this.value)
          this.dateVal = [this.SevenDayBefore(date),date]
        }else if(this.value instanceof Date){
          this.dateVal = [this.SevenDayBefore(this.value),this.value]
        }
        this.$nextTick(() => this.doChange())
      },
      doChange() {
        this.dateVal = this.picker.formatToValue(this.dateVal)
        this.$emit('input', this.dateVal)
        this.$emit('change', this.dateVal)
      },
      SevenDayBefore(date) {
        date = new Date(date.getTime())
        let res
        switch (this.type) {
          case 'month':
            res = new Date(date.setMonth(date.getMonth() - this.rangeIntervalNum))
            break
          case 'date':
            res = new Date(date.setDate(date.getDate() - this.rangeIntervalNum))
            break
          case 'year':
            res = new Date(date.setFullYear(date.getFullYear() - this.rangeIntervalNum))
            break
        }
        return res
      },
      toLastMon:debounce(function() {
        switch (this.type) {
          case 'month':
            this.dateVal = Array.from(this.time, time => new Date(time.setMonth(time.getMonth() - this.intervalNum)))
            break
          case 'date':
            this.dateVal = Array.from(this.time, time => new Date(time.setDate(time.getDate() - this.intervalNum)))
            break
          case 'year':
            this.dateVal = Array.from(this.time, time => new Date(time.setFullYear(time.getFullYear() - this.intervalNum)))
            break
        }
        this.$nextTick(() => this.doChange())
      }),
      toCurrMon:debounce(function() {
        const date = new Date();
        this.dateVal = [this.SevenDayBefore(date), date]
        this.$nextTick(() => this.doChange())
      }),
      toNextMon:debounce(function() {
        switch (this.type) {
          case 'month':
            this.dateVal = Array.from(this.time, time => new Date(time.setMonth(time.getMonth() + this.intervalNum)))
            break
          case 'date':
            this.dateVal = Array.from(this.time, time => new Date(time.setDate(time.getDate() + this.intervalNum)))
            break
          case 'year':
            this.dateVal = Array.from(this.time, time => new Date(time.setFullYear(time.getFullYear() + this.intervalNum)))
            break
        }
        this.$nextTick(() => this.doChange())
      }),
    },
  }
</script>

<style scoped>
  .date {
    position: relative;
    height: 28px;
    display: inline-flex;
    line-height: 100%;
  }
  .button{
    margin-left: 10px;
  }
</style>
